<template>
    <div>
        
        
    
        <!-- 顶部标签团队目标设置 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="团队目标设置" name="first">
                <!--设置签约目标 -->
        <el-dialog title="添加页面" :visible.sync="dialogFormVisible" width="60%" >
          <div class="form-container">
      <el-form label-width="80px" :model="pojo">
        <el-row>
          <el-col :span="6">
            <el-form-item label="选择年份">
              <el-select v-model="pojo.years" placeholder="请选择年份">
                <el-option
                  v-for="item in yearOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择团队">
              <el-select v-model="pojo.team" placeholder="请选择团队">
                <el-option
                  v-for="item in teamOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="全年目标">
          <el-input v-model="pojo.yeargoal"></el-input>
        </el-form-item>

        <el-button type="primary"  @click="submit()">平均分配到每月</el-button>

       
  <el-descriptions class="margin-top"  :column="4" :size="size" border>
    <el-descriptions-item>
      <el-form-item label="1月">
    <el-input  v-model="pojo.one"></el-input>
  </el-form-item>
    </el-descriptions-item>
    
    <el-descriptions-item>
      <el-form-item label="2月">
    <el-input  v-model="pojo.two"></el-input>
  </el-form-item>
      </el-descriptions-item>
      
      <el-descriptions-item>
        <el-form-item label="3月">
    <el-input  v-model="pojo.three"></el-input>
  </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <el-form-item label="第一季度" disabled="true" >
    <el-input  v-model="pojo.firstquartergoal"></el-input>
  </el-form-item>
      </el-descriptions-item>
      
      <el-descriptions-item>
      <el-form-item label="4月">
    <el-input  v-model="pojo.month"></el-input>
  </el-form-item>
    </el-descriptions-item>
    
    <el-descriptions-item>
      <el-form-item label="5月">
    <el-input  v-model="pojo.month"></el-input>
  </el-form-item>
      </el-descriptions-item>
      
      <el-descriptions-item>
        <el-form-item label="6月">
    <el-input  v-model="pojo.month"></el-input>
  </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <el-form-item label="第二季度" disabled="true" >
    <el-input  v-model="pojo.twoquartergoal"></el-input>
  </el-form-item>
      </el-descriptions-item>
      
      <el-descriptions-item>
      <el-form-item label="7月">
    <el-input  v-model="pojo.month"></el-input>
  </el-form-item>
    </el-descriptions-item>
    
    <el-descriptions-item>
      <el-form-item label="8月">
    <el-input  v-model="pojo.month"></el-input>
  </el-form-item>
      </el-descriptions-item>
      
      <el-descriptions-item>
        <el-form-item label="9月">
    <el-input  v-model="pojo.month"></el-input>
  </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <el-form-item label="第三季度" disabled="true" >
    <el-input  v-model="pojo.threequartergoal"></el-input>
  </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
      <el-form-item label="10月">
    <el-input  v-model="pojo.month"></el-input>
  </el-form-item>
    </el-descriptions-item>
    
    <el-descriptions-item>
      <el-form-item label="11月">
    <el-input  v-model="pojo.month"></el-input>
  </el-form-item>
      </el-descriptions-item>
      
      <el-descriptions-item>
        <el-form-item label="12月">
    <el-input  v-model="pojo.month"></el-input>
  </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <el-form-item label="第四季度" disabled="true" >
    <el-input  v-model="pojo.fourquartergoal"></el-input>
  </el-form-item>
      </el-descriptions-item>
       </el-descriptions>

       
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">保 存</el-button>
        </div>
      </el-form>
    </div>

</el-dialog>
        
        <!-- 模糊查询 -->
        <el-form ref="form" :model="form" label-width="80px" >
         <el-form-item label="年度">
        <el-select v-model="form.years" placeholder="请选择活动区域">
        <el-option label="2023年" value="2023年"></el-option>
        <el-option label="2022年" value="2022年"></el-option>
        <el-option label="2021年" value="2021年"></el-option>
        <el-option label="2020年" value="2020年"></el-option> 
         </el-select>
        </el-form-item>
        
        <!-- <el-form-item label="所属机构">
        <el-select v-model="form.institutionId" placeholder="请选择活动区域">
        <el-option :label="r.name" :v-for="r in institutionList " :key="r.id"  :value="r.id"></el-option>
         </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="所属团队">
        <el-select v-model="form.teamId" placeholder="请选择活动区域">
        <el-option :label="t.name" :v-for="t in teamList " :key="t.id"  :value="t.id"></el-option>
         </el-select>
        </el-form-item> -->
        
  
  <el-form-item>
    <el-button type="primary" @click="findAll()">查询</el-button>
    <el-button>取消</el-button>
    <el-button type="primary" @click="toadd()">设置签约目标</el-button>
  </el-form-item>
</el-form>
   
                <!--团队查询所有 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column
      fixed="left"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button type="text"  @click="toupdate(scope.row)" size="small">编辑</el-button>
      </template>
    </el-table-column>    
       <el-table-column  prop="teamId"  label="团队编号"  > </el-table-column>
    <!-- <el-table-column prop="teamname"  label="团队名称" >  </el-table-column> -->
    <el-table-column  prop="yeargoal"  label="全年目标"  > </el-table-column>
    <el-table-column  prop="firstquartergoal"  label="第一季度"  > </el-table-column>
    <el-table-column prop="one"  label="一月" >  </el-table-column>
    <el-table-column prop="two"  label="二月" >  </el-table-column>
    <el-table-column  prop="three"  label="三月" > </el-table-column>
    <el-table-column  prop="twoquartergoal"  label="第二季度"  > </el-table-column>
    <el-table-column prop="four"  label="四月" >  </el-table-column>
    <el-table-column prop="fire"  label="五月" >  </el-table-column>
    <el-table-column  prop="six"  label="六月" > </el-table-column>
    <el-table-column  prop="threequartergoal"  label="第三季度"  > </el-table-column>
    <el-table-column prop="serven"  label="七月" >  </el-table-column>
    <el-table-column prop="eight"  label="八月" >  </el-table-column>
    <el-table-column  prop="nine"  label="九月" > </el-table-column>
    <el-table-column  prop="fourquartergoal"  label="第四季度"  > </el-table-column>
    <el-table-column prop="ten"  label="十月" >  </el-table-column>
    <el-table-column prop="elven"  label="十一月" >  </el-table-column>
    <el-table-column  prop="twelve"  label="十二月" > </el-table-column>  
   
  </el-table> 
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageNum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="total">
    </el-pagination>
    
    </el-tab-pane>
    <el-tab-pane label="医生目标设置" name="second">
      <!-- 模糊查询 -->
      <el-form ref="form" :model="form" label-width="80px" >
         <el-form-item label="年度">
        <el-select v-model="form.years" placeholder="请选择活动区域">
        <el-option label="2023年" value="2023年"></el-option>
        <el-option label="2022年" value="2022年"></el-option>
        <el-option label="2021年" value="2021年"></el-option>
        <el-option label="2020年" value="2020年"></el-option> 
         </el-select>
        </el-form-item>
        
        <!-- <el-form-item label="所属机构">
        <el-select v-model="form.institutionId" placeholder="请选择活动区域">
        <el-option :label="r.name" :v-for="r in institutionList " :key="r.id"  :value="r.id"></el-option>
         </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="所属团队">
        <el-select v-model="form.teamId" placeholder="请选择活动区域">
        <el-option :label="t.name" :v-for="t in teamList " :key="t.id"  :value="t.id"></el-option>
         </el-select>
        </el-form-item> -->
        
            <!-- <el-form-item label="医生">
        <el-select v-model="form.doctorId" placeholder="请选择活动区域">
        <el-option :label="d.name" :v-for="d in doctorList " :key="d.id"  :value="d.id"></el-option>
         </el-select>
        </el-form-item> -->
        
        
  
  <el-form-item>
    <el-button type="primary" @click="findAll()">查询</el-button>
    <el-button>取消</el-button>
    <el-button type="primary" @click="toadd()">设置签约目标</el-button>
  </el-form-item>
</el-form>
   
                <!--医生查询所有 -->
        <el-table :data="tableData1" style="width: 100%">
            <el-table-column
      fixed="left"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button type="text"  @click="toupdate(scope.row)" size="small">编辑</el-button>
      </template>
    </el-table-column>    
       <el-table-column  prop="doctorId"  label="医生编号"  > </el-table-column>
    <!-- <el-table-column prop="doctorname"  label="医生名称" >  </el-table-column> -->
    <el-table-column  prop="yeargoal"  label="全年目标"  > </el-table-column>
    <el-table-column  prop="firstquartergoal"  label="第一季度"  > </el-table-column>
    <el-table-column prop="one"  label="一月" >  </el-table-column>
    <el-table-column prop="two"  label="二月" >  </el-table-column>
    <el-table-column  prop="three"  label="三月" > </el-table-column>
    <el-table-column  prop="twoquartergoal"  label="第二季度"  > </el-table-column>
    <el-table-column prop="four"  label="四月" >  </el-table-column>
    <el-table-column prop="fire"  label="五月" >  </el-table-column>
    <el-table-column  prop="six"  label="六月" > </el-table-column>
    <el-table-column  prop="threequartergoal"  label="第三季度"  > </el-table-column>
    <el-table-column prop="serven"  label="七月" >  </el-table-column>
    <el-table-column prop="eight"  label="八月" >  </el-table-column>
    <el-table-column  prop="nine"  label="九月" > </el-table-column>
    <el-table-column  prop="fourquartergoal"  label="第四季度"  > </el-table-column>
    <el-table-column prop="ten"  label="十月" >  </el-table-column>
    <el-table-column prop="elven"  label="十一月" >  </el-table-column>
    <el-table-column  prop="twelve"  label="十二月" > </el-table-column>  
   
  </el-table> 
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageNum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="total">
    </el-pagination>
    </el-tab-pane>
  </el-tabs>
   </div>
</template>

    <script>
    import axios from 'axios';
        export default {
            data() {
                return {
                    tableData: [],
                    tableData1:[],
                    total:0,
                    pageNum:1,
                    pageSize:2,
                    form:{},
                    activeName: 'first',
                    pojo:{},
                    dialogFormVisible:false,
                    month:'',
                }
            },
            methods:{
              submit(){
                 this.month=this.pojo.yeargoal/12
                 this.pojo.one=this.month
                 this.pojo.two=this.month
                 this.pojo.three=this.month
                 this.pojo.firstquartergoal=this.pojo.one+this.pojo.two+this.pojo.three
                 this.pojo.four=this.month
                 this.pojo.five=this.month
                  this.pojo.six=this.month
                  this.pojo.twoquartergoal=this.pojo.four+this.pojo.fire+this.pojo.six
                  this.pojo.seven=this.month
                  this.pojo.eight=this.month
                  this.pojo.nine=this.month
                   this.pojo.threequartergoal=this.pojo.seven+this.pojo.eight+this.pojo.nine
                  this.pojo.ten=this.month
                  this.pojo.eleven=this.month
                  this.pojo.twelve=this.month
                  this.pojo.fourquartergoal=this.pojo.ten+this.pojo.eleven+this.pojo.twelve
              },
              toadd(){
                this.dialogFormVisible=true
              },
                handleClick(tab, event) {
                console.log(tab, event);
            },
            findAll(){
            axios.post(`http://localhost:8300/yejiteam/findAll?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.form).then(res=>{
                this.tableData = res.data.records;
                this.total = res.data.total;
            })
            
        },
            
        findAll1(){
            axios.post(`http://localhost:8300/yejidoctor/findAll?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.form).then(res=>{
                this.tableData1 = res.data.records;
                this.total = res.data.total;
            })
            
        },
        
        handleSizeChange(val) {
          this.pageSize = val;
          this.findAll();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.findAll();
        console.log(`当前页: ${val}`);
      }
            },
            created() {
                this.findAll()
                this.findAll1()
            }
        }
</script>

<style scoped>

</style>